<template>
  <div>
    <div>
      <!--      <Button @click="exportXLSX" icon="ios-cloud-export-outline">下载模板文件</Button>-->
      <a href="/lanbao_file/template/template.xlsx">下载模板文件</a>
      <div><span class="error">*</span>请先下载模板，然后在模板中编辑数据，在导入,否则无法识别！</div>
    </div>
    <Upload action="/" :before-upload="beforeUpload">
      <Button icon="ios-cloud-upload-outline">选择文件</Button>
    </Upload>
    <div>
      <Table border :max-height="height" class="mt10" border :columns="columns" :data="data"></Table>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      height: {
        type: Number,
        default: 300,
      }
    },
    data () {
      return {
        columns: [
          {
            title: '序号',
            key: '序号'
          },
          {
            title: '设备编码',
            key: '设备编码'
          },
          {
            title: '设备SIM卡号（ICCID）',
            key: '设备SIM卡号（ICCID）'
          }
        ],
        data: []
      }
    },
    methods: {
      exportXLSX () {
        import('@/components/export/table-import-export.min').then($Table => {
          $Table.default.Component.export({
            type: 'xlsx',
            fileName: '设备编码录入模板',
            columns: this.columns,
            data: this.data
          });
        });
      },
      beforeUpload (file) {
        import('@/components/export/table-import-export.min').then($Table => {
          $Table.default.Component.import({
            type: 'xlsx',
            file: file,
            finish: (res) => {
              // this.columns = res.columns;
              this.data = res.data || [];
              console.log(res)
              let flag = false;
              let arr = this.data.map(item => {
                if (!item['设备编码'] || !item['设备SIM卡号（ICCID）']) flag = true;
                return item['设备编码'] + ':' + item['设备SIM卡号（ICCID）']
              })
              if (flag || this.data.length === 0) {
                this.$Message.error('设备编码或者设备SIM卡号不能为空！');
              } else {
                this.$emit('changeData', _.uniq(arr).join())
              }

            }
          });
        });
        return false;
      }
    }
  }
</script>
<style scoped lang="less">
.export-box {
  height: 0;
  overflow: hidden
}
</style>
